<template>
    <div class="about-us">
      <h2>关于我们</h2>
      <p class="description">
        我们是一家致力于提供优质服务和产品的公司。我们的使命是通过创新和卓越的客户服务来满足客户的需求。
      </p>
      
      <h3>我们的团队</h3>
      <div class="team">
        <div v-for="member in teamMembers" :key="member.id" class="team-member">
          <img :src="member.photo" alt="Member Photo" class="member-photo" />
          <h4>{{ member.name }}</h4>
          <p>{{ member.position }}</p>
        </div>
      </div>
  
      <h3>联系方式</h3>
      <p>如有任何疑问，请通过以下方式与我们联系：</p>
      <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
      <p>电话: <a href="tel:+123456789">+123 456 789</a></p>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const teamMembers = ref([
    {
      id: 1,
      name: '赵六',
      position: 'CEO',
      photo: 'https://via.placeholder.com/100',
    },
    {
      id: 2,
      name: '李四',
      position: 'CTO',
      photo: 'https://via.placeholder.com/100',
    },
    {
      id: 3,
      name: '王五',
      position: '市场经理',
      photo: 'https://via.placeholder.com/100',
    },
  ]);
  </script>
  
  <style scoped>
  .about-us {
    width: 1420px; /* 限制组件宽度 */
    margin: 0 auto; /* 居中对齐 */
    padding: 20px;
    /* background-color: #f9f9f9; */
    border-radius: 10px;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
  }
  
  h2 {
    text-align: center;
    font-family: 'Arial', sans-serif;
    color: #333;
    margin-bottom: 20px;
  }
  
  .description {
    text-align: center;
    font-size: 1.2em; /* 增大字体 */
    color: #555;
    margin-bottom: 30px;
  }
  
  .team {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  
  .team-member {
    text-align: center;
    margin: 10px;
    padding: 15px; /* 增加内边距 */
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    transition: transform 0.2s;
    width: 150px; /* 固定宽度，保持一致性 */
  }
  
  .team-member:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
  
  .member-photo {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
  }
  
  h3 {
    text-align: center; /* 居中标题 */
    margin-top: 20px;
    margin-bottom: 10px;
  }
  </style>